<script setup lang="ts" name="CouponCardProperty">
import { CouponCardProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
import { CouponTemplateType } from '@/api/mall/promotion/coupon'
import { floatToFixed2 } from '@/utils/numberUtil'
import { PromotionDiscountTypeEnum } from '@/enums/mallEnums'

// 优惠券卡片属性面板

const props = defineProps<{ modelValue: CouponCardProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)

// 优惠券列表
const couponList = ref<CouponTemplateType[]>([])
const couponSelectDialog = ref()
// 添加优惠券
const handleAddCoupon = () => {
  couponSelectDialog.value.open()
}
watch(
  () => couponList.value,
  () => {
    formData.value.couponIds = couponList.value.map((coupon) => coupon.id)
  }
)
</script>

<template>
  <MallProperty v-model="formData.style">
    <ElForm label-width="80px" :model="formData">
      <ElCard header="优惠券列表" class="property-group" shadow="never">
        <div v-for="(coupon, index) in couponList" :key="index" class="flex items-center justify-between">
          <ElText size="large" truncated>{{ coupon.name }}</ElText>
          <ElText type="info" truncated>
            <span v-if="coupon.usePrice > 0">满{{ floatToFixed2(coupon.usePrice) }}元，</span>
            <span v-if="coupon.discountType === PromotionDiscountTypeEnum.PRICE.type"> 减{{ floatToFixed2(coupon.discountPrice) }}元 </span>
            <span v-else> 打{{ coupon.discountPercent }}折 </span>
          </ElText>
        </div>
        <ElFormItem label-width="0">
          <ElButton type="primary" plain class="m-t-8px w-full" @click="handleAddCoupon"> <SvgIcon icon="ep:plus" class="mr-5px" /> 添加 </ElButton>
        </ElFormItem>
      </ElCard>
      <ElCard header="优惠券样式" class="property-group" shadow="never">
        <ElFormItem label="列数" prop="type">
          <ElRadioGroup v-model="formData.columns">
            <ElTooltip class="item" content="一列" placement="bottom">
              <ElRadioButton :label="1">
                <SvgIcon icon="fluent:text-column-one-24-filled" />
              </ElRadioButton>
            </ElTooltip>
            <ElTooltip class="item" content="二列" placement="bottom">
              <ElRadioButton :label="2">
                <SvgIcon icon="fluent:text-column-two-24-filled" />
              </ElRadioButton>
            </ElTooltip>
            <ElTooltip class="item" content="三列" placement="bottom">
              <ElRadioButton :label="3">
                <SvgIcon icon="fluent:text-column-three-24-filled" />
              </ElRadioButton>
            </ElTooltip>
          </ElRadioGroup>
        </ElFormItem>
        <ElFormItem label="背景图片" prop="bgImg">
          <UploadImage v-model="formData.bgImg" height="80px" width="100%" class="min-w-160px" />
        </ElFormItem>
        <ElFormItem label="文字颜色" prop="textColor">
          <ColorInput v-model="formData.textColor" />
        </ElFormItem>
        <ElFormItem label="按钮背景" prop="button.bgColor">
          <ColorInput v-model="formData.button.bgColor" />
        </ElFormItem>
        <ElFormItem label="按钮文字" prop="button.color">
          <ColorInput v-model="formData.button.color" />
        </ElFormItem>
        <ElFormItem label="间隔" prop="space">
          <ElSlider v-model="formData.space" :max="100" :min="0" show-input input-size="small" :show-input-controls="false" />
        </ElFormItem>
      </ElCard>
    </ElForm>
  </MallProperty>
  <!-- 优惠券选择 -->
  <CouponSelect ref="couponSelectDialog" v-model:multiple-selection="couponList" />
</template>

<style scoped lang="scss"></style>
